<template>
    <!-- 应用管理 -->
    <div class="container h-100">
        <edit-tree apiPrefix="/sys/app-category" class="tree" title="应用分类" :newFields="categoryFields" @select="selectCategory" />
        <entity-manager
            apiPrefix="/sys/app"
            :fields="fields"
            class="right"
            :params="params"
            ref="entityRef"
            operationsWidth="180px"
            :withEdit="false"
            :withDelete="false"
            :beforeSave="beforeSave"
        >
            <template #prefixButtons="{ row }">
                <el-link type="primary" icon="Memo" @click="showDetail(row)">详情</el-link>
                <!-- 系统级应用不能下架与删除 -->
                <span v-if="row.code != 'sys' && row.code != 'super'">
                    <el-link type="primary" icon="Check" @click="online(row)" v-if="row.status == 0" v-perm="'edit'">上架</el-link>
                    <el-link type="danger" icon="Remove" @click="offline(row)" v-else v-perm="'edit'">下架</el-link>
                    <el-link type="danger" icon="Delete" @click="doDelete(row)" v-perm="'delete'">删除</el-link>
                </span>
            </template>
        </entity-manager>

        <full-panel v-model="detailVisible" :key="currentApp.id" title="应用详情">
            <detail :id="currentApp.id" @close="closeDetail" @reload="reload" />
        </full-panel>
    </div>
</template>
<script setup>
import EditTree from "@/components/edit-tree/index.vue";
import FullPanel from "@/components/full-panel.vue";
import { h } from "vue";
import { ElTag } from "element-plus";
import detail from "./detail.vue";

const categoryFields = [{ label: "分类名称", prop: "name", required: true, max: 255 }];
const fields = ref([
    { label: "应用分类", prop: "categoryId", required: true, type: "select", options: loadCategory, converter: (val, row) => row.categoryName || "--" },
    { label: "应用编码", prop: "code", required: true, width: "120px" },
    { label: "应用名称", prop: "name", required: true },
    {
        label: "应用状态",
        prop: "status",
        needNew: false,
        width: "80px",
        render: (val) => {
            if (val) {
                return h(ElTag, { type: "primary" }, () => "上架");
            } else {
                return h(ElTag, { type: "danger" }, () => "下架");
            }
        },
    },
    { label: "图标", prop: "icon", type: "iconSelector", width: "60px", align: "center" },
    {
        label: "平台",
        prop: "platform",
        type: "radioGroup",
        options: [
            { label: "PC", value: "pc" },
            { label: "APP", value: "app" },
            { label: "h5", value: "h5" },
            { label: "微信小程序", value: "mp" },
        ],
        default: "pc",
        width: "80px",
    },
    { label: "应用地址", prop: "url", required: false, remark: "如果是外部应用，请填写正确的应用地址" },
    {
        label: "打开方式",
        prop: "openType",
        type: "radioGroup",
        options: [
            { label: "当前窗口", value: "inner" },
            { label: "新窗口", value: "new" },
        ],
        default: "inner",
        width: "100px",
    },
    { label: "排序", prop: "sort", default: "0", width: "80px" },
]);
const currentCategory = ref();
const params = ref({});
const entityRef = ref();
const authVisible = ref(false);
const detailVisible = ref(false);
const currentApp = ref({});

function selectCategory(category) {
    currentCategory.value = category;
    params.value.categoryId = category.id;
    entityRef.value.reload();
}

function showAuth() {
    authVisible.value = true;
}

function loadCategory() {
    return app.https.post("/sys/app-category/query");
}

function online(row) {
    app.https
        .put("/sys/app/update", {
            id: row.id,
            status: 1,
        })
        .then(() => {
            app.success("操作成功");
            row.status = 1;
        });
}

function offline(row) {
    app.https
        .put("/sys/app/update", {
            id: row.id,
            status: 0,
        })
        .then(() => {
            app.success("操作成功");
            row.status = 0;
        });
}

function doDelete(row) {
    entityRef.value.doDelete(row);
}

function showDetail(row) {
    currentApp.value = row;
    detailVisible.value = true;
}

function reload() {
    entityRef.value.reload();
}

function closeDetail(resp) {
    if (resp) {
        entityRef.value.reload();
    }
    detailVisible.value = false;
}

function beforeSave(params) {
    params.useLimitType = "private";
}
</script>

<style lang="scss" scoped>
.container {
    display: grid;
    grid-template-columns: 260px calc(100% - 260px);
}
</style>
